<!-- 图片指定颜色替换以及撕裂效果 -->
<template>
	<CaImage v-if="newSrc" :src="newSrc" :mode="mode" :size="size" :width="width" :height="height" :radius="radius" :iStyle="iStyle" :bigInfo="bigInfo" :newImage="newImage" :cancelBubble="cancelBubble" :hasCenter="hasCenter" @click="onClick">
		<slot></slot>
	</CaImage>
	<canvas v-else="sWidth && sHeight" type="2d" :id="canvasId" :canvas-id="canvasId" :style="[{width: sWidth + 'px', height: sHeight + 'px', marginLeft: '-10000px'}]"></canvas>
</template>

<script>
	
	import main from './'
	import base from '@/components/index.vue'
	
	/**
	 * 撕裂的原理
	 * 用一个图片框框住图片，生成一个新的图片
	 * 然后将新的图片的特定颜色ripColor值替换成透明色
	 */
	
	export default {
		extends: base,
		props: {
			src: [String, Object],
			
			/**
			 * 撕裂的图片框图片
			 * 如果存在，表示撕裂
			 */
			ripSrc: String,
			
			// 旧颜色值。如果存在ripSrc，该值表示需要撕裂的图片中的内容颜色值
			oldColor: {
				type: String,
				default: '#e00ff7'
			},
			// 新颜色值。如果存在ripSrc，该值一般为透明的颜色值
			newColor: {
				type: String,
				default: 'rgba(255, 255, 255, 0)'
			},
			
			// 以下都是CaImage的属性
			mode: String,
			// 宽高相同的尺寸，这种模式下mode被修正为aspectFit
			size: [String, Number],
			width: [String, Number],
			height: [String, Number],
			// 圆角。-1表示高度的一半；大于0表示对应的圆角
			radius: [String, Number],
			iStyle: Object,
			// 是否点击预览全图。如果是，则不再响应其它的点击事件
			showBig: Boolean,
			// 显示所有大图的信息。不传则显示单张大图。
			bigInfo: Object,
			// 是否要得到新的图片
			newImage: Boolean,
			// 是否阻断事件
			cancelBubble: Boolean,
			// 是否有中间内容
			hasCenter: Boolean,
			// 画布序号。多个一起使用时需传
			canvasIndex: [String, Number]
		},
		data() {
			var canvasId
			if (this.canvasIndex) {
				canvasId = `myCanvas${this.canvasIndex}`
			} else {
				canvasId = `myCanvas${parseInt(Math.random() * 1000)}`
			}
			return {
				newSrc: '',
				canvasId,
				sWidth: 0,
				sHeight: 0,
				wScale: 1,
				hScale: 1,
			}
		},
		mounted() {
			
		},
		methods: {
			initial() {
				var {src, ripSrc, oldColor, newColor, canvasId} = this
				// 撕裂的情况，一定会有至少两个图片；非撕裂的情况只有一个
				src = ripSrc ? [this.core.isDevelopment ? require('./test.jpg') : src, ripSrc] : src
				main.handleCanvas({src, oldColor, newColor, canvasId, that: this, callback: (res) => {
					this.sWidth = res.width
					this.sHeight = res.height
					// 计算出来没有用，不能在canvas画布上更改，否则无法重新写入像素点
					this.getScaleValue()
				}}).then(res => {
					this.newSrc = res
				})
			},
			
			// 获取宽高的缩放值
			getScaleValue() {
				var {width, height, size, sWidth, sHeight} = this
				width = parseFloat(width)
				height = parseFloat(height)
				size = parseFloat(size)
				if (size) {
					if (!width) {
						width = size
					}
					if (!height) {
						height = size
					}
				}
				if (width) {
					width = this.VueTool.handleSize(width, true)
				}
				if (height) {
					height = this.VueTool.handleSize(height, true)
				}
				if (width) {
					this.wScale = width / sWidth
					if (!height) {
						this.hScale = this.wScale
					}
				}
				if (height) {
					this.hScale = height / sHeight
					if (!width) {
						this.wScale = this.hScale
					}
				}
			},
			
			onClick() {
				if (this.showBig) {
					uni.previewImage({
						urls: [this.src]
					})
				} else {
					this.$emit('click')
				}
			}
		}
	}
</script>

<style>
</style>